<template>
  <el-card>
    <div class="avatar">
      <el-avatar src="" />
    </div>
    <div class="infomation">
      <p class="name">{{ details.name }} <span style="color: #000; margin-left: 10px;">(顾客编号: No.{{ details.code }})</span></p>
      <p>电话：{{ details.phone | phoneHandle }} <span class="display-complete" @click="isPhone = !isPhone">{{ isPhone ? "隐藏" : "显示完整" }}</span></p>
      <p>身份证：{{ details.idNumber | idNumberHandle }}<span class="display-complete" @click="isIdNumber = !isIdNumber">{{ isIdNumber ? "隐藏" : "显示完整" }}</span></p>
      <!-- <p v-if="action">
        会员等级： 金卡
        <el-button style="margin-left: 10px;" type="text" @click="handleLevel"><i class="el-icon-edit" /></el-button>
      </p> -->
      <!-- <el-row v-if="!action">
        <el-tag effect="dark">会员等级: 金卡</el-tag>
        <el-tag effect="dark">渠道来源: 新氧</el-tag>
        <el-tag effect="dark">渠道人员: 张三</el-tag>
        <el-tag effect="dark">网店咨询: 王老师</el-tag>
        <el-tag effect="dark">现场咨询: 王老师</el-tag>
      </el-row> -->
    </div>
    <div v-if="action" class="action">
      <div class="balance">余额 <span class="text-color">{{ details.capital || 0 }}</span></div>
      <div class="button-list"><el-button type="primary" class="text-color bg-color" @click="recharge">充值</el-button><el-button class="bg-color refund-color" type="primary" @click="refundBalance">退款</el-button></div>
      <!-- <el-button type="primary">档案信息</el-button>
      <el-button type="primary">咨询记录</el-button> -->
      <!-- <el-button type="primary" @click="editBtn">{{ isEdit ? "保存" : "编辑资料" }}</el-button> -->
      <!-- <el-button>接待</el-button> -->
    </div>

  </el-card>
</template>
<script>
let vm;
export default {
  filters: {
    phoneHandle(val) {
      if (vm.isPhone) return val;
      let phone = "";
      if (val) phone = val.substring(0, 3) + "****" + val.substring(val.length - 4, val.length);
      return phone;
    },
    idNumberHandle(val) {
      if (vm.isIdNumber) return val;
      let idNumber = "";
      if (val) idNumber = val.substring(0, 3) + "****" + val.substring(val.length - 2, val.length);
      return idNumber;
    },
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    action: {
      type: Boolean,
      default: false,
    },
    details: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isEdit: false,
      isPhone: false,
      isIdNumber: false,
    };
  },
  created() {
    vm = this;
  },
  mounted() {
    this.isEdit = false;
  },
  methods: {
    handleLevel() {
      this.$emit('change-level');
    },
    // 编辑
    editBtn() {
      let flag = false;
      if (!this.isEdit) {
        flag = true;
        this.isEdit = !this.isEdit;
      }
      this.$emit("edit", flag);
    },
    recharge() {
      this.$emit('recharge');
    },
    refundBalance() {
      this.$emit("refundBalance");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables";

.el-card {
  /deep/.el-card__body {
    height: inherit;
    display: flex;
    position: relative;
    align-items: center;
  }
  .action {
    position: absolute;
    right: 30px;
    top: 30px;
  }
  .avatar {
    width: 20%;
    display: flex;
    justify-content: center;
    .el-avatar {
      min-width: 105px;
      min-height: 105px;
    }
  }
  .el-tag {
    background-color: $text-color;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    padding: 0 15px;
    margin: 0 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
  }
  .infomation > p {
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  .balance{
    font-size: 24px;
  }
  .button-list{
    margin-top: 20px;
  }
  .display-complete{
    color:#AAAAAA;
    margin-left: 10px;
    cursor: pointer;
  }
  .text-color{
    color:#f77464;
  }
  .bg-color{
    background: #ebf0fe;
    border-color: #ebf0fe;
  }
  .refund-color{
    color:#999;
  }
}
</style>
